﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>常用工具类函数</title>
</head>
<body>
    <div>
        <p id="p1">
            计算数组的和：
        </p>
    </div>
    <div>
        <p id="p2">
            遍历对象中的属性:
        </p>
    </div>
    <div>
        <p id="p3">
            遍历浏览器支持的属性：
        </p>
    </div>
    <div>
        <p id="p4">
            查找数组中的元素：
        </p>
    </div>
    <div>
        <p id="p5">
            抓取和筛选数组中的元素：
        </p>
    </div>
    <div>
        <p id="p6">
            对数组中元素进行映射:
        </p>
    </div>

    <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#p1').click(loopArray);
            $('#p2').click(loopObjectProperties);
            $('#p3').click(getBrowserInfo);
            $('#p4').click(findInArray);
            $('#p5').click(filterArray);
            $('#p6').click(mapArray);
        });
        function loopArray() {
            var array = [1, 2, 4, 8, 16, 32];
            var total = 0;
            $.each(array, function (index, item) {
                total += item;
            });
            $("#p1").append(total);
        }
        function loopObjectProperties() {
            var employee = { ID: 1001, Name: "Jerry", Email: "jerry@etc.com" };
            $.each(employee, function (index, item) {
                $("<br/><span>" + index + ":" + item + "</span>").appendTo("#p2");
            });
        }
        function getBrowserInfo() {
            $.each($.support, function (index, item) {
                $("<br/><span>" + index + ":" + item + "</span>").appendTo("#p3");
            });
        }
        function findInArray() {
            var array = [1, 2, 3, 4, 5, 6, 7, 8];
            var index = $.inArray(8, array);
            $("<span>元素8在数组中的索引是 :" + index + "</span>").appendTo('#p4');
        }
        function filterArray() {
            var array = [3, 8, 12, 6, 5, 123, 64];
            var results = $.grep(array, function (valueFilter, indexFilter) {
                return (valueFilter % 2 == 0);
            });
            $("<span>偶数:</span>").appendTo('#p5');
            $.each(results, function (index, item) {
                $("<span>" + item + "&nbsp;</span>").appendTo('#p5');
            });
        }
        function mapArray() {
            var array = [1, 2, 3, 4, 5];
            var results = $.map(array, function (value, index) {
                return value * value;
            });
            $("<span>映射后的数组:</span>").appendTo('#p6');
            $.each(results, function (index, item) {
                $("<span>" + item + "&nbsp;</span>").appendTo('#p6');
            });
        }
    </script>
</body>
</html>
